<template>
	<view class="">
	   我的模版集
	</view>
  <view class="flow-container">
    <!-- 带标题和内容的流式块 -->
    <view 
      class="flow-item" 
      v-for="(item3, index) in mobanlist" 
      :key="index"
      @click="showPopup(index)"
    >
      <view class="item-header">{{item3.mouldname}}</view>
      <view class="item-content">
		  <view v-for="(item,index) in item3.groups" :key="index">
		  	  <text style="margin-left: 10rpx;"> {{item.name}}</text>
		  </view>
	  </view>
    </view>
<uni-popup ref="popup" type="center">
      <view class="popup-content">
        <view class="popup-header">
          <text>{{ mobanlist[this.index].mouldname }}</text>
        </view>
        <view class="popup-body">
          <view class="" v-for="(item4,index1) in mobanlist[this.index].groups" :key="index1">
			  {{index1+1}} {{item4.name}}
          	   <br />
          </view>
        </view>
        <view class="popup-footer">
          <button @click="importTemplate">导入</button>
        </view>
      </view>
    </uni-popup>
    <!-- 详情弹窗 -->
  
  </view>
</template>

<script>
export default {
  data() {
    return {
		selectedDate:"",
		index:'',
		mobanlist:[],
      list: [
        { 
          index: 1, 
          title: '公告标题1', 
          content: '这是第一条公告的内容...' 
        },
        { 
          index: 2, 
          title: '活动通知2', 
          content: '这里是第二条活动的详细内容...' 
        },
        { 
          index: 3, 
          title: '新闻动态3', 
          content: '第三条新闻的具体内容展示...' 
        },
        { 
          index: 4, 
          title: '系统消息4', 
          content: '第四条系统消息的内容部分...' 
        }
      ],
      importmould:{
		  settime:'',
		  userid: 1,
          mouldid:'',
		  id:'',
		  status:6,
		createtime: "2009-02-01 15:12:23",
		illustrate :"qui commodo aute",
         exercisetime: 4379


	  }
    };
  },
  onLoad(options) {
	   this.selectedDate = options.Date ;
	      console.log(this.selectedDate); // 打印传递过来的 selectedDate 参数
  	this.getallmould()
  },
  methods: {
   
	showPopup(index) {
		this.index=index
	      this.$refs.popup.open();
	    },
	    importTemplate() {
	      // console.log('导入模版:', this.currentTemplate);
	      // 在这里实现导入模板的逻辑
		  this.importmould.settime= this.formatDate(this.selectedDate).toString();
		  // console.log(this.importmould.settime);
		  this.importmould.mouldid=this.mobanlist[this.index].mouldid
		  this.importmould.id=38
		  // console.log(this.formatDate(new Date()));
		  uni.request({
		  	url:'http://localhost:8082/history/add',
			method:"POST",
			data:this.importmould,
			header:{'content-type':'application/json'},
			success: (res) => {
				console.log(res.data);
			 uni.navigateBack({
			          delta: 1 // 回退1页
			        });
				
			}
		  })
		  this.index='',
	      this.$refs.popup.close();
	    },
    formatDate() {
      return new Date().toLocaleString();
    },
	getallmould(){
		uni.request({
			url:'http://localhost:8080/mould/select',
										method:'POST',
										 data:{
											 id:1
											 },
											 header:{'content-type':'application/x-www-form-urlencoded'},
										 success: (res) => {
										 	console.log(res)
											this.mobanlist=res.data.data
											console.log(this.mobanlist)
										 }
		})
	},
	 formatDate(dateString) {
	      const date = new Date(dateString + ' 00:00:00');
	           const year = date.getFullYear();
	           const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数
	           const day = String(date.getDate()).padStart(2, '0');
	           const hours = String(date.getHours()).padStart(2, '0');
	           const minutes = String(date.getMinutes()).padStart(2, '0');
	           const seconds = String(date.getSeconds()).padStart(2, '0');
	     
	           return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
	    },
  }
};
</script>

<style scoped>
/* 流式布局容器 */
.flow-container {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  background-color: #f8f8f8;
}

/* 单个列表块 */
.flow-item {
  width: calc(50% - 40rpx);
  height: 300rpx;
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column; /* 垂直排列内容 */
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}

/* 块内标题和内容 */
.item-header {
  padding: 20rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  border-bottom: 1rpx solid #f0f0f0;
}

.item-content {
	
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 40rpx;
  min-height: 120rpx; /* 保证内容区域高度 */
  display: flex;
  flex-direction: row;
 /* display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 最多显示3行 */ 
}

/* 点击动画 */
.flow-item:active {
  transform: scale(0.98);
}

.popup-content {
  width: 650rpx;
  /* max-width: 600rpx; */
  background-color: #fff;
  height: 800rpx;
  border-radius: 20rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.popup-header {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.popup-body {
  min-height: 200rpx;
  font-size: 32rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.popup-footer {
  text-align: right;
}




.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
}

.close {
  font-size: 40rpx;
  color: #7f8c8d;
  cursor: pointer;
}


</style>